<template>
    <div id="bar-head">
        <div id="logo" style="font-size: 2em; font-weight: bold;">
            <span>Project Navigation</span>
        </div>
        <div id="bar-search">Search Bar Here</div>
        <div id="bar-head-right">
            <button id="login">Log In</button>
            <button id="signup">Sign Up</button>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
button {
    font-size: 1.2em;
    background: white;
    padding: 4px 10px;
    border: solid 1px gray;
    border-radius: 4px;
}

button:hover {
    background: #39c5bb;
}

#bar-head {
    width: auto;
    height: 4em;
    background-color: white;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    box-shadow:0 2px 5px rgba(0,0,0,.02);
}

#logo {
    user-select: none;
}

#bar-head * {
    /*使内部元素垂直居中*/
    margin: auto;
    margin-left: 4px;
    margin-right: 4px;
}
</style>
